<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <title>Document</title>
        <style>
            div.growlUI { background: url(check48.png) no-repeat 10px 10px }
            div.growlUI h1, div.growlUI h2 {
                color: white; padding: 5px 5px 5px 75px; text-align: left
            }
        </style>
    </head>
    <body>
        <button id="demo2">demo2-修改阻塞样式</button>
        <button id="demo3">demo3-重写被遮盖的背景颜色</button>
        <button id="demo4">demo4-修改提示语句</button>
        <button id="demo5">demo5-插入图片</button>
        <button id="demo6">demo6-没有居中的信息</button>
        <button id="demo7">demo7-空阻塞页面</button>
        <button id="demo8">demo8-回调函数</button>
        <button id="demo9">demo9-点击解锁页面</button>
        <button id="demo10">demo10-自动解锁</button>
        <button id="demo11">demo11-growl(the hard way)</button>
        <button id="demo12">demo12-growl(the easy way)</button>
        <button id="demo13">demo13-jquery UI 主题</button>
        <button id="demo14">demo14-页面锁定的回调函数</button>
        <button id="demo15">demo15-点击解锁</button>
        <!-- <div class="blockOverlay"></div> -->
        <img id="displayBox" src="http://malsup.com/jquery/block/gecko.jpg" width="400" height="400" style="display:none">
        <div id="tallContent">我要在上海买座房子</div>
        <div id="tip">你点了我</div>
        <div class="growlUI" style="display:none">
            <h1>Growl Notification</h1>
            <h2>Have a nice day!</h2>
        </div>
        <script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
        <script src="js/jquery.blockUI.js"></script>
        <script>
            $(document).ready(function() {
                $('#myButton').click(function() {
                    $.blockUI({ css: {
                        border: 'none',
                        padding: '15px',
                        backgroundColor: '#000',
                        '-webkit-border-radius': '10px',
                        '-moz-border-radius': '10px',
                        opacity: .5,
                        color: '#fff'
                    } });

                    setTimeout($.unblockUI, 2000);
                });
            });
            $(document).ready(function() {
                $('#demo3').click(function() {
                    $.blockUI({ overlayCSS: { backgroundColor: '#00f' } });

                    setTimeout($.unblockUI, 2000);
                });
            });
            $(document).ready(function() {
                $('#demo4').click(function() {
                    $.blockUI({
                        // message: $('#tallContent'),
                        message: '债券，国债，穿越牛熊',
                        css: { top: '20%' }
                    });

                    setTimeout($.unblockUI, 2000);
                });
            });
            $(document).ready(function() {
                $('#demo5').click(function() {
                    $.blockUI({
                        message: $('#displayBox'),
                        css: {
                            top:  ($(window).height() - 400) /2 + 'px',
                            left: ($(window).width() - 400) /2 + 'px',
                            width: '400px'
                        }
                    });

                    setTimeout($.unblockUI, 2000);
                });
            });
            $(document).ready(function() {
                $('#demo6').click(function() {
                    $.blockUI({
                        centerY: 0,
                        css: { top: '10px', left: '', right: '10px' }
                    });

                    setTimeout($.unblockUI, 2000);
                });
            });
            $(document).ready(function() {
                $('#demo7').click(function() {
                    $.blockUI({ message: null });

                    setTimeout($.unblockUI, 2000);
                });
            });
            $(document).ready(function() {
                $('#demo8').click(function() {
                    $.blockUI();

                    setTimeout(function() {
                        $.unblockUI({
                            onUnblock: function(){ alert('onUnblock'); }
                        });
                    }, 2000);
                });
            });
            $(document).ready(function() {
                $('#demo9').click(function() {
                    $.blockUI();
                    $('.blockOverlay').attr('title','Click to unblock').click($.unblockUI);
                });
            });
            $(document).ready(function() {
                $('#demo10').click(function() {
                    $.blockUI({
                        message: '<h1>Auto-Unblock!</h1>',
                        timeout: 2000
                    });
                });
            });
            $(document).ready(function() {
                $('#demo11').click(function() {
                    $.blockUI({
                        message: $('div.growlUI'),
                        fadeIn: 700,
                        fadeOut: 700,
                        timeout: 2000,
                        showOverlay: false,
                        centerY: false,
                        css: {
                            width: '350px',
                            top: '10px',
                            left: '',
                            right: '10px',
                            border: 'none',
                            padding: '5px',
                            backgroundColor: '#000',
                            '-webkit-border-radius': '10px',
                            '-moz-border-radius': '10px',
                            opacity: .6,
                            color: '#fff'
                        }
                    });
                });
            });
            $(document).ready(function() {
               $('#demo12').click(function() {
                   $.growlUI('Growl Notification', 'Have a nice day!');
               });
            });
            $(document).ready(function() {
                $('#demo13').click(function() {
                    $.blockUI({
                        theme:     true,
                        title:    'This is your title',
                        message:  '<p>This is your message.</p>',
                        timeout:   2000
                    });
                });   
            });
            $(document).ready(function() {
                $('#demo14').click(function() {
                    $.blockUI({
                        fadeIn: 1000,
                        timeout:   2000,
                        onBlock: function() {
                            alert('Page is now blocked; fadeIn complete');
                        }
                    });
                });   
            });
            $(document).ready(function() {
                $('#demo15').click(function() {
                    $.blockUI({
                        onOverlayClick: $.unblockUI
                    });
                });   
            });
        </script>
    </body>
</html>